<template>
  <div class="dashboard-container">
    <el-card class="header-card">
      <div slot="header" class="headerClass">
        <span>传感器数据</span>
      </div>
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="5">
          <div class="grid-content bg-purple" style="height: 300px">
            <chartModal
              :full-option="temperature"
              :loading="temperatureLoading"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple" style="height: 300px">
            <chartModal
              :full-option="humidity"
              :loading="humidityLoading"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple" style="height: 300px">
            <chartModal
              :full-option="lightIntensity"
              :loading="lightLoading"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple" style="height: 300px">
            <chartModal
              :full-option="soilMoisture"
              :loading="soilLoading"
            />
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple" style="height: 300px;">
            <chartModal
              :full-option="carbonDioxide"
              :loading="carbonDioxideLoading"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="header-card" style="margin-top: 10px">
      <div slot="header" class="headerClass">
        <span>温湿度数据折线图</span>
      </div>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="23">
          <div style="height: 280px">
            <chartModal
              :full-option="pieWarn"
              :loading="warnLoading"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="header-card" style="margin-top: 10px">
      <div slot="header" class="headerClass">
        <span>传感器数据折线图</span>
      </div>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="23">
          <div style="height: 280px">
            <chartModal
              :full-option="sensor"
              :loading="sensorLoading"
            />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import chartModal from '@/components/echart/chartModal.vue'
import chartOpt from '@/components/echart/option.js'
// import { getDataList } from '@/api/monitor'

// import axios from 'axios'
export default {
  components: {
    chartModal
  },
  data() {
    return {
      temperatureLoading: true,
      lightLoading: true,
      humidityLoading: true,
      soilLoading: true,
      warnLoading: true,
      carbonDioxideLoading: true,
      sensorLoading: true,
      temperatureNum: '',
      humidityNum: '',
      soilMoistureNum: '',
      lightIntensityNum: '',
      carbonDioxideNum: '',
      pieWarn: {
        option: {},
        init: false
      },
      sensor: {
        option: {},
        init: false
      },
      temperature: {
        option: {},
        init: false
      },
      humidity: {
        option: {},
        init: false
      },
      soilMoisture: {
        option: {},
        init: false
      },
      lightIntensity: {
        option: {},
        init: false
      },
      carbonDioxide: {
        option: {},
        init: false
      },
      temperatureHumidity: [
        { name: '星期一', temperature: 36.55, humidity: 60 },
        { name: '星期二', temperature: 45.65, humidity: 70 },
        { name: '星期三', temperature: 40.74, humidity: 110 },
        { name: '星期四', temperature: 25.25, humidity: 60 },
        { name: '星期五', temperature: 50.63, humidity: 120 },
        { name: '星期六', temperature: 65.44, humidity: 66 },
        { name: '星期日', temperature: 30.22, humidity: 50 }
      ],
      sensorDataList: [
        {
          time: '8:00',
          soilMoisture: 36.55,
          lightIntensity: 100.55,
          carbonDioxide: 60
        },
        {
          time: '9:00',
          soilMoisture: 45.65,
          lightIntensity: 110.65,
          carbonDioxide: 70
        },
        {
          time: '10:00',
          soilMoisture: 40.74,
          lightIntensity: 120.74,
          carbonDioxide: 110
        },
        {
          time: '11:00',
          soilMoisture: 25.25,
          lightIntensity: 130.25,
          carbonDioxide: 60
        },
        {
          time: '12:00',
          soilMoisture: 50.63,
          lightIntensity: 140.63,
          carbonDioxide: 120
        },
        {
          time: '13:00',
          soilMoisture: 65.44,
          lightIntensity: 150.44,
          carbonDioxide: 66
        },
        {
          time: '14:00',
          soilMoisture: 30.22,
          lightIntensity: 160.22,
          carbonDioxide: 50
        },
        {
          time: '15:00',
          soilMoisture: 30.22,
          lightIntensity: 160.22,
          carbonDioxide: 50
        },
        {
          time: '16:00',
          soilMoisture: 30.22,
          lightIntensity: 160.22,
          carbonDioxide: 50
        }
      ],
      // dataList: [],
      timer: null // 定时器名称
    }
  },
  computed: {
    dataList() {
      return this.$store.state.user.dataList1
    }
  },
  created() {
    // window.setInterval(() => {
    //   this.getDataList()
    // }, 30000)
  },
  mounted() {
    // this.pieWarnData()
    // this.temperatureData()
    // this.humidityData()
    // this.soilMoistureData()
    // this.carbonDioxideData()
    this.SensorDataInit()
    // this.$store.dispatch('user/getDataList1')
    // this.init()

    this.getDataList()
    // window.setInterval(() => {
    //   this.getDataList()
    // }, 5000)
    this.init()
    // this.getDate()
    // window.setInterval(() => {
    //   this.getDate()
    // }, 3000)
    // this.timer = setInterval(this.getDataList(), 5000)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    arrayUnique(arr, name) {
      var hash = {}
      return arr.reduce(function(item, next) {
        hash[next[name]]
          ? ''
          : (hash[next[name]] = true && item.push(next))
        return item
      }, [])
    },
    init() {
      this.timer = setInterval(() => {
        this.$store.dispatch('user/getDataList1').then(() => {
          const arrList = this.arrayUnique(this.dataList, 'time')
          console.log(arrList)
          this.temperatureHumidity = arrList
            .map((res) => {
              const re = res.msg
                .split('#')
                .filter((item) => item !== '')
              const obj = {}
              obj['time'] = res.time
              obj['temperature'] = re[0]
              obj['humidity'] = re[1]
              return obj
            })
            .reverse()
          this.sensorDataList = arrList
            .map((res) => {
              const re = res.msg
                .split('#')
                .filter((item) => item !== '')
              const obj = {}
              obj['time'] = res.time
              obj['lightIntensity'] = re[2]
              obj['soilMoisture'] = re[3]
              obj['carbonDioxide'] = re[4]
              return obj
            })
            .reverse()
          console.log(this.temperatureHumidity)
          const list = this.dataList[0].msg
            .split('#')
            .filter((item) => item !== '')
          this.$nextTick(() => {
            this.temperatureNum = list[0]
            this.humidityNum = list[1]
            this.lightIntensityNum = list[2]
            this.soilMoistureNum = list[3]
            this.carbonDioxideNum = list[4]
          })
          this.temperatureData()
          this.humidityData()
          this.soilMoistureData()
          this.lightIntensityData()
          this.carbonDioxideData()
          this.pieWarnData()
          this.SensorDataInit()
        })
      }, 5000)
    },
    getDate() {
      this.$http
        .post('/api/getdata', {
          uid: 'a3e31f5b515e4dd49ea0d36a8c2ffbdc',
          topic: 'temp',
          num: '1'
        })
        .then((res) => {
          console.log(
            res.data.list.data[0].msg
              .split('#')
              .filter((item) => item !== '')
          )
          this.dataList = res.data.list.data[0].msg
            .split('#')
            .filter((item) => item !== '')
          this.$nextTick(() => {
            this.temperatureNum = this.dataList[0]
            this.humidityNum = this.dataList[1]
          })
        })
    },
    async getDataList() {
      this.$store.dispatch('user/getDataList1').then(() => {
        const arrList = this.arrayUnique(this.dataList, 'time')
        this.temperatureHumidity = arrList
          .map((res) => {
            const re = res.msg
              .split('#')
              .filter((item) => item !== '')
            const obj = {}
            obj['time'] = res.time
            obj['temperature'] = re[0]
            obj['humidity'] = re[1]
            return obj
          })
          .reverse()
        this.sensorDataList = arrList
          .map((res) => {
            const re = res.msg
              .split('#')
              .filter((item) => item !== '')
            const obj = {}
            obj['time'] = res.time
            obj['lightIntensity'] = re[2]
            obj['soilMoisture'] = re[3]
            obj['carbonDioxide'] = re[4]
            return obj
          })
          .reverse()
        console.log(this.temperatureHumidity)
        const list = this.dataList[0].msg
          .split('#')
          .filter((item) => item !== '')
        this.$nextTick(() => {
          this.temperatureNum = list[0]
          this.humidityNum = list[1]
          this.lightIntensityNum = list[2]
          this.soilMoistureNum = list[3]
          this.carbonDioxideNum = list[4]
        })
        this.temperatureData()
        this.humidityData()
        this.soilMoistureData()
        this.lightIntensityData()
        this.carbonDioxideData()
        this.pieWarnData()
        this.SensorDataInit()
      })
    },
    pieWarnData() {
      setTimeout(() => {
        this.pieWarn = {
          option: chartOpt.pieWarinFour(this.temperatureHumidity, [
            'time',
            'temperature',
            'humidity'
          ]),
          init: true
        }
        this.warnLoading = false
      }, 0)
    },
    SensorDataInit() {
      setTimeout(() => {
        this.sensor = {
          option: chartOpt.sensorData(this.sensorDataList, [
            'time',
            'lightIntensity',
            'soilMoisture',
            'carbonDioxide'
          ]),
          init: true
        }
        this.sensorLoading = false
      }, 0)
    },
    temperatureData() {
      setTimeout(() => {
        this.temperature = {
          option: chartOpt.temperature(this.temperatureNum),
          init: true
        }
        this.temperatureLoading = false
      }, 0)
    },
    humidityData() {
      setTimeout(() => {
        this.humidity = {
          option: chartOpt.humidity(this.humidityNum),
          init: true
        }
        this.humidityLoading = false
      }, 0)
    },
    soilMoistureData() {
      setTimeout(() => {
        this.soilMoisture = {
          option: chartOpt.soilMoisture(this.soilMoistureNum),
          init: true
        }
        this.soilLoading = false
      }, 0)
    },
    lightIntensityData() {
      setTimeout(() => {
        this.lightIntensity = {
          option: chartOpt.lightIntensity(this.lightIntensityNum),
          init: true
        }
        this.lightLoading = false
      }, 0)
    },
    carbonDioxideData() {
      setTimeout(() => {
        this.carbonDioxide = {
          option: chartOpt.carbonDioxide(this.carbonDioxideNum),
          init: true
        }
        this.carbonDioxideLoading = false
      }, 0)
    }
    // getDate() {
    //   this.$http.get('/getdata', {
    //     params: {
    //       uid: 'fcaad2e7f597b6bd81942b52d640bdf1',
    //       topic: 'temp',
    //       num: 10
    //     }
    //     // headers: {
    //     //   'Authorization': 'Bearer ' + this.$store.getters.token
    //     // }
    //   })
    //     .then(function(response) {
    //       console.log(response)
    //     })
    //     .catch(function(error) {
    //       console.log(error)
    //     })
    // }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-container {
    padding: 20px;
}
.el-row {
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #eee;
}
.bg-purple {
    background: #fff;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    border-radius: 4px;
    min-height: 100px;
}
.row-bg {
    // padding: 10px 0;
    background-color: #f9fafc;
}
.elcol {
    position: relative;
    right: -100px;
}
.headerClass {
    font-size: 18px;
    font-weight: 600;
}
</style>
<style lang="less" scoped>
.header-card{
    /deep/.el-card__header{
        padding: 10px;
    }
    /deep/.el-card__body{
        padding: 10px;
    }
}
.loading-icon {
    animation: ani-loading-spin 1s linear infinite;
}
@keyframes ani-loading-spin {
    form {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>
